{% extends 'IcsocUIBundle::base.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
       '@jqgird_css'
       '@datepicker_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <form>
    <div class="row">
        <div class="col-xs-12  widget-container-col">
            <div class="widget-box widget-color-blue">
              <!-- /section:custom/widget-box.options -->
                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <table class="table table-striped table-bordered table-hover">
                            <tbody>
                                <tr>
                                    <td class="col-xs-2" align="right">
                                        <span>坐席工号:</span>
                                    </td>
                                    <td class="col-xs-4">
                                        <input type="text" id="agentNumber" placeholder="9527" >
                                    </td>
                                    <td class="col-xs-2" align="right">
                                        <span>坐席号码:</span>
                                    </td>
                                    <td class="col-xs-4">
                                        <input type="text"  placeholder="9527" >
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4" align="center">
                                        <button id="loading-btn" type="button" class="btn btn-success" data-loading-text="Loading...">查 询</button>
                                        <button  type="reset" class="btn btn-pink" >重 置</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
    <br/>
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
{% endblock %}
{% block footer %}
    {% javascripts
        '@datepicker_js'
        '@jqgird_js'
        filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
 jQuery(function($) {
    var grid_selector = "#grid-table";
    var pager_selector = "#grid-pager";
    //resize to fit page size
    $(window).on('resize.jqGrid', function () {
        $(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
    });
    //resize on sidebar collapse/expand
    var parent_column = $(grid_selector).closest('[class*="col-"]');
    $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
        if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
            $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
        }
    });
    jQuery(grid_selector).jqGrid({
        url: "{{ path('icsoc_ui_list_agent', {'flag':'1'}) }}",  //数据；
        mtype: 'POST',
        datatype: "json", //从服务器端返回的数据类型，默认xml：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
        height: 250, //展示高度；
        colNames:[' ', '用户工号 ','用户名称','用户角色', '所属业务组', '所属技能组','数据权限', '坐席角色', 'CRM权限', '坐席类型', '操作'],  //列显示名称，是一个数组对象
        colModel:[
            {name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
                formatter:'actions',
                formatoptions:{
                    keys:true,
                    editbutton:false,
                    delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback}
                    //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
                }
            },
            {name:'ag_num',index:'ag_num', width:60, sorttype:"int", editable: true},
            {name:'ag_name',index:'ag_name',width:90, editable:true},
            {name:'category',index:'category', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
            {name:'author',index:'author', width:70, editable: true},
            {name:'content',index:'content', width:90, editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}},
            {name:'addtime',index:'addtime', width:150, sortable:false},
            {name:'addtime',index:'addtime', width:150, sortable:false},
            {name:'addtime',index:'addtime', width:150, sortable:false},
            {name:'addtime',index:'addtime', width:150, sortable:false},
            {name:'addtime',index:'addtime', width:150, sortable:false},
        ],
        viewrecords : true, //定义是否要显示总记录数
        rowNum:10,  //默认每页显示多少条数据
        rowList:[10,20,30], //每页显示几条数据下拉框的选项
        pager : pager_selector, //翻页工具对象
        altRows: true,  //表格间隔底色
        //toppager: true,
        multiselect: true,  //是否可以多选
        //multikey: "ctrlKey",
        multiboxonly: false,
        loadComplete : function() {
            var table = this;
            setTimeout(function(){
                styleCheckbox(table);
                updateActionIcons(table);
                updatePagerIcons(table);
                enableTooltips(table);
            }, 0);
        },
        editurl: "{{ path('icsoc_ui_jqgrid_oper') }}",//nothing is saved 定义对form编辑时的url
        caption: "用户列表" //表格名称
    });
    $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
    //navButtons
    jQuery(grid_selector).jqGrid('navGrid',pager_selector,
    { 	//navbar options
        edit: false,
        add: false,
        del: true,
        delicon : 'ace-icon fa fa-trash-o red',
        search: false,
        refresh: true,
        refreshicon : 'ace-icon fa fa-refresh green',
        view: true,
        viewicon : 'ace-icon fa fa-search-plus grey'
    },
    {},
    {},
    {
        //delete record form
        recreateForm: true,
        beforeShowForm : function(e) {
            var form = $(e[0]);
            if(form.data('styled')) return false;

            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
            style_delete_form(form);

            form.data('styled', true);
        },
        onClick : function(e) {
         alert(1);
        }
    },
    {},
    {
        //view record form
        recreateForm: true,
        beforeShowForm: function(e){
            var form = $(e[0]);
            form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
        }
    }
   );

    function style_delete_form(form) {
        var buttons = form.next().find('.EditButton .fm-button');
        buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
        buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
        buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
    }

    function beforeDeleteCallback(e) {
        var form = $(e[0]);
        if(form.data('styled')) return false;
        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
        style_delete_form(form);

        form.data('styled', true);
    }


    //replace icons with FontAwesome icons like above
    function updatePagerIcons(table) {
        var replacement =
        {
            'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
            'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
            'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
            'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
        };
        $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
            var icon = $(this);
            var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
            if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
        })
    }
    function enableTooltips(table) {
        $('.navtable .ui-pg-button').tooltip({container:'body'});
        $(table).find('.ui-pg-div').tooltip({container:'body'});
    }
    });
    jQuery(function($) {
        $('#loading-btn').on(ace.click_event, function () {
            var btn = $(this);
            btn.button('loading');
            //可以开始获取值进行查询
            var agentNumber = $('#agentNumber').val();
            var fliter = '{"agentNumber":"'+agentNumber+'"}';
            var arr = {'fliter':fliter};
            $('#grid-table').setGridParam({postData:arr}).trigger("reloadGrid");
            btn.button('reset')
        });
    })
    </script>
{% endblock %}